<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>车辆添加</title>
    <style>
        #che {
            width: 400px;
            height: 300px;
            margin-bottom: 10px;
            overflow: hidden;
        }

        #che img {
            width: 400px;
            display: block;
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
            integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    </head>

    <body class="col-sm-12" style="margin-top:5px">
        <div class=" panel panel-info">
            <div class="panel-heading">
                <h3 class="panel-title">添加车辆</h3>
            </div>
            <div class="panel-body">
                <div class="form-group">
                    <label for="">上传图片</label>
                    <div class="form-control" id="che"><img src="img/cars.jpg" alt="" onclick="selFile()" id="img"
                            title="点击插入图片">
                    </div>
                    <input type="file" class=" btn-info" id="txt1" onchange="selFileEnd(event)" style="display: none">
                </div>
                <div class=" form-group">
                    <label for="">名称</label>
                    <input class="form-control" id="txt2" cols="30" rows="10" placeholder="请输入名称">
                </div>
                <div class="form-group">
                    <label for="">优惠价</label>
                    <input class="form-control" id="txt3" cols="30" rows="10" placeholder="请输入优惠价格">
                </div>
                <div class="form-group">
                    <label for="">指导价</label>
                    <input class="form-control" id="txt4" cols="30" rows="10" placeholder="请输入指导价">
                </div>
                <button type="submit" class="btn btn-primary btn-block" onclick="save()">提交</button>

            </div>
        </div>
        </div>
        <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
        <script>
            const chuan = document.querySelector("#txt1");
            const name = document.querySelector("#txt2");
            const youhui = document.querySelector("#txt3");
            const advice = document.querySelector("#txt4");
            const che = document.querySelector("#che");
            const img = document.querySelector("#img")
            function selFile() {
                chuan.click();
            }
            function selFileEnd(event) {
                // console.log(event.currentTarget.files);
                // 如果服务器接收的是formData数据，那么我们直接使用FormData创建一个数据对象
                const formData = new FormData();
                formData.append("file", event.currentTarget.files[0]); // append向formData数据中写入内容
                // axios发送post请求
                axios.post("/api/upload", formData).then((res) => {
                    console.log(res.data);
                    img.src = res.data.info;
                });
            }
            function save() {
                if (name.value && youhui.value && advice.value && img.src) {
                    axios.post("/api/cars", {
                        CSName: name.value,
                        FavorablePrice: youhui.value,
                        AdvicePrice: advice.value,
                        ImgUrl: img.src,
                    }).then((res) => {
                        console.log(res)
                        if (res.data.code == 1) {
                            location.href = "/car.html"
                        }
                    })
                } else {
                    alert("请输入内容")
                }
            }

        </script>

    </body>

    </html>
</body>

</html>